<template>
	<!-- 绑定添加的提现方式 -->
	<view class="zhanghao">
		<view class="zhanghao_one" v-if="band_ID!=2">
			<view class="zhanghao_one_title">
				第一步：先进行手机短信验证
			</view>
			<view class="zhanghao_one_title2">
				绑定的手机号{{phone.substr(0,3)}}****{{phone.substr(-4)}}
			</view>
			<view class="zhanghao_input">
				<view class="input_left">
					<input type="text" value="" v-model="code" @input="input" placeholder="请输入验证码"
						placeholder-style="color:#CCCCCC" />
				</view>
				<view class="input_right" v-if="showText" @click="getCode">
					获取验证码
				</view>
				<view class="input_right" v-else>
					重新发送({{ second }})
				</view>
			</view>
			<block>
				<view class="zhanghao_one_title" v-if="band_ID==0">
					第二步：请上传微信收款码
				</view>
				<view class="zhanghao_one_title" v-if="band_ID==1">
					第二步：请上传支付宝收款码
				</view>
				<view class="zhanghao_image" v-if="band_ID==0">
					<image @click="up_cart('wx')" :src="from.image||'../../static/bang_images.png'" mode="aspectFill">
					</image>
				</view>
				<view class="zhanghao_image" v-if="band_ID==1">
					<image @click="up_cart('zs')" :src="from.image||'../../static/bang_images.png'" mode="aspectFill">
					</image>
				</view>
				<view class="zhanghao_one_title">
					第三步：填写真实姓名
				</view>
				<view class="zhanghao_input">
					<view class="input_left">
						<input type="text" value="" v-model="from.name" placeholder="请输入真实姓名"
							placeholder-style="color:#CCCCCC" />
					</view>
					<!-- <view class="input_right">
						获取验证码
					</view> -->
				</view>
			</block>
		</view>
		<view class="zhanghao_two" v-if="band_ID==2">
			<view class="zhanghao_twos">
				<view class="zhanghao_twos_title">
					持卡人姓名
				</view>
				<view class="zhanghao_twos_input">
					<input type="text" value="" v-model="from.name" placeholder="请输入真实姓名"
						placeholder-style="color:#CCCCCC" />
				</view>
			</view>
			<view class="zhanghao_twos">
				<view class="zhanghao_twos_title">
					银行名称
				</view>
				<view class="zhanghao_twos_input">
					<input type="text" value="" v-model="from.bank_name" placeholder="请输入银行名称"
						placeholder-style="color:#CCCCCC" />
				</view>
			</view>
			<view class="zhanghao_twos">
				<view class="zhanghao_twos_title">
					银行卡号
				</view>
				<view class="zhanghao_twos_input">
					<input type="text" value="" v-model="from.card_no" placeholder="请输入银行卡号"
						placeholder-style="color:#CCCCCC" />
				</view>
			</view>
			<view class="zhanghao_twos">
				<view class="zhanghao_twos_title">
					开户行
				</view>
				<view class="zhanghao_twos_input">
					<input type="text" value="" v-model="from.open_account" placeholder="请输入开户行"
						placeholder-style="color:#CCCCCC" />
				</view>
			</view>
		</view>
		<view class="zhanghao_button" @click="conformBing">
			提交
		</view>
	</view>
</template>

<script>
	import {
		baseURL
	} from '../../common/config/config.js';
	import {
		checkCode,
		addWZC,
		cardInfo,
		cardList,
		sendSms
	} from "@/common/config/request.js"
	export default {
		data() {
			return {
				band_ID: "", //标识
				from: {
					type: "", //类型:0=微信,1=支付宝,2=银行卡
					name: "", //姓名
					image: "", //图片
					bank_name: "", //银行名称
					card_no: "", //卡号
					open_account: "", //开户行
				},
				userinfo: "", //用户详情
				phone: uni.getStorageSync('mobile'),
				code: "", //验证码
				wxFable: false,
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
			}
		},
		onLoad(option) {
			this.band_ID = option.id
			this.from.type = option.id
			uni.setNavigationBarTitle({
				title: option.id == 0 ? '绑定微信账号' : option.id == 1 ? '绑定支付宝' : option.id == 2 ? '绑定银行卡' : ''
			})
			// 获取当前的信息
			this.kaInfo()
		},
		methods: {
			getCode() {
				this.yzphone().then((r) => {
					if (r == true) {
						sendSms({
							phone: this.phone
						}).then((res) => {
							console.log(res)
							if (res.data.code == 1) {
								this.djs()
							}

						})
					}
				})
			},
			djs() {
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
					console.log(times);
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
			},
			yzphone() {
				console.log(this.phone)
				return new Promise((r, n) => {
					if (!this.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
						uni.showToast({
							title: '请输入正确手机号',
							icon: 'none'
						});
						return;
					}
					r(true)
				})
			},
			kaInfo() {
				// 卡号信息
				cardList({}).then(res => {
					if (res.data.code == 1) {
						res.data.data.forEach(item => {
							console.log('item', item)
							if (item.type == this.band_ID) {
								this.from.image = item.image
								this.from.name = item.name
								this.from.bank_name = item.bank_name
								this.from.card_no = item.card_no
								this.from.open_account = item.open_account
							}
						})
					}
				})
			},
			input(e) {
				// 输入六位数时，验证  正确则进行下一步
				// console.log(e.detail.value)
				if (e.detail.value.length == 6) {
					let data = {
						phone: this.phone,
						code: this.code
					}
					checkCode(data).then(res => {
						if (res.data.code == 1) {
							this.wxFable = true
							uni.showToast({
								icon: "none",
								title: '验证成功'
							})
						}
					})
				}
			},
			up_cart(e) {
				console.log(e)
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseURL + '/api/Upload/index',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
							},
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								if (e == 'wx') {
									this.from.image = JSON.parse(uploadFileRes
										.data).data
								} else {
									this.from.image = JSON.parse(uploadFileRes
										.data).data
								}
								console.log(JSON.parse(uploadFileRes.data).data);
							}
						});
					}
				});
			},
			conformBing() {
				let data = this.from
				if (this.band_ID != 2) {
					if (this.wxFable) {
						addWZC(data).then(res => {
							if (res.data.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '绑定成功'
								})
								setTimeout(() => {
									uni.navigateBack({

									})
								}, 1500)
							}
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: '请先短信验证'
						})
					}

				} else {
					let datas = this.from
					addWZC(datas).then(res => {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '绑定成功'
							})
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 1500)
						}
					})
				}
				console.log(this.from)
			}
		}
	}
</script>

<style lang="scss">
	.zhanghao {
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 20rpx;

		.zhanghao_one {
			width: 100%;

			.zhanghao_one_title {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #333333;
				// box-sizing: border-box;
				margin-top: 25rpx;
			}

			.zhanghao_one_title2 {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rx;
				color: #999999;
				margin-top: 10rpx;
			}

			.zhanghao_input {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				border-bottom: 1rpx solid #CCCCCC;

				.input_left {
					input {
						width: 260rpx;
						height: 40rpx;
					}
				}

				.input_right {
					width: 140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}

			.zhanghao_image {
				margin-top: 25rpx;

				image {
					width: 172rpx;
					height: 172rpx;
				}
			}
		}

		.zhanghao_two {
			width: 100%;

			.zhanghao_twos {
				width: 100%;
				height: 108rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #CCCCCC;

				.zhanghao_twos_title {
					width: 200rpx;
					margin-left: 10rpx;
				}

				.zhanghao_twos_input {
					input {
						width: 300rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
			}
		}

		// 提交
		.zhanghao_button {
			width: 710rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #FA9700;
			border-radius: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 170rpx;
		}
	}
</style>
